<template>
  <div class="content">
    <el-dialog
      v-dialogDrag
      title="价格异动报表"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <el-date-picker
          v-model="value1"
          type="daterange"
          align="right"
          size="mini"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="width: 268px;margin-right: 5px;"
        />
        <el-input v-model="client.fname" size="mini" style="width: 168px;margin-right: 5px;" placeholder="物料名称" />
        <el-input v-model="client.fnumber" size="mini" style="width: 168px;margin-right: 5px;" placeholder="物料编码" />
        <el-input v-model="client.supplier" size="mini" style="width: 168px;margin-right: 5px;" placeholder="供应商名称" />
        <el-button size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="53vh"
        serial
      />
      <jc-pagination
        v-show="client.total > 0"
        :total="client.total"
        :page.sync="client.pageNum"
        :limit.sync="client.pageSize"
        @pagination="queryTBdCustomerList"
      />
    </el-dialog>
  </div>
</template>
<script>
import picker from '@/components/Search/picker'
import { queryPriceListException } from '@/api/homePage/product'

export default {
  mixins: [picker],
  data() {
    return {
      isclientlDialog: true,
      client: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200, // 每页显示多少条数据
        fname: '',
        fsupplier: '',
        fnumber: ''
      },
      value1: [],
      tableData: [],
      tableHeader: [
        { label: '价目表异动时间', prop: 'fapproveDate' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber' },
        { label: '物料描述', prop: 'fspecificaTion', minWidth: '200' },
        { label: this.$t('market.suppliername'), prop: 'fsupplier', width: '150' },
        { label: '原单价', prop: 'fbeforeprice' },
        { label: '现单价', prop: 'fafterprice' },
        { label: '总下单金额', prop: 'famountSum' },
        { label: '降本金额', prop: 'reduction' },
        { label: '单价变更人', prop: 'fcreator' }
      ]
    }
  },
  created() {
    this.jinnian() // 今年
    this.value1 = this.timers
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取价格异动
    async queryTBdCustomerList() {
      this.isclientlDialog = true
      const DATA = {
        ...this.client,
        startDate: this.value1?.[0],
        endDate: this.value1?.[1]
      }
      const { data: RES } = await queryPriceListException(DATA)
      this.tableData = RES.list
      this.client.total = RES.total
    },
    clientSearch() {
      this.client.pageNum = 1
      this.queryTBdCustomerList()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('client')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
}
</style>
